<template>
  <!-- 视图:只能有一个根元素(vue2) -->
  <div class="home">
    <HelloWorld :msg="arr" :num="num" />{{ num }}
    <ul class="keep_ul">
      <router-link to="/A" tag="li">A组件</router-link>
      <router-link to="/B" tag="li">B组件</router-link>
      <router-link to="/C" tag="li">C组件</router-link>
      <router-link to="/D" tag="li">D组件</router-link>
    </ul>
    <div class="contaner">
      <keep-alive :include="['A', 'C', 'D']" max="3">
        <router-view></router-view>
      </keep-alive>
    </div>
    <button @click="goToAbout">跳转</button>
    <!-- <iframe width="500" height="500" src="http://47.93.101.203/admin/login?redirect=%2Fadmin%2Fhome%2F"
      frameborder="0"></iframe> -->

    <component :is="compenentName"></component>
  </div>
</template>

<script>
// 逻辑  optionsAPI   选项试API
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import A from "./keepalive/A.vue"
import B from "./keepalive/B.vue"
import { getDiyData, getMockSwiper } from "@/apis/index"
export default {
  name: 'HomeView',
  // 组件是为了复用的.一个函数返回对象的形式.不会相互影响
  data () {
    return {
      num: 1,
      arr: [1, 2, 3],
      compenentName: "B"
    }
  },
  components: {
    HelloWorld,
    A,
    B
  },

  // 局部
  directives: {},
  filters: {},
  created () {
    // this.getInitData()
    this.getMockData()
  },
  // beforeCreate () {
  //   console.log('Home beforeCreate')
  // },
  // created () {
  //   console.log('Home created')

  // },
  // beforeMount () {
  //   console.log('Home beforeMount')
  // },
  // mounted () {
  //   console.log('Home mounted')

  // },
  beforeUpdate () {
    console.log('Home beforeUpdate')

  },
  updated () {
    console.log('Home updated')

  },
  // beforeDestroy () {
  //   console.log('Home beforeDestroy')

  // },
  // destroyed () {
  //   console.log('Home destroyed')

  // },//毁灭  onUnmounted
  // // keepalive时候触发
  // activated () { },//激活状态
  // deactivated () { } //失去激活状态
  methods: {
    async getInitData () {
      // getDiyData().then((res) => {
      //   console.log("获取的数据", res)
      //   this.news = res.data.news
      // })
      // sdfsd 
      const result = await getDiyData()
      this.news = result.data.news
    },
    getMockData () {
      getMockSwiper().then((res) => {
        console.log("获取到的mock数据是", res)
      })
    },
    goToAbout () {
      // this.$router.push({ path: "/about" })
      this.num++
    }
  },
}

</script>
<!-- scoped局部样式(属性选择器原理) -->

<style lang="scss" scoped>
/* 样式层 */
.home {
  color: pink;
}

.keep_ul {
  display: flex;
  width: 375px;
  overflow: hidden;
  border: 5px solid blue;

  li {
    width: 180px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: 1px solid red;
    list-style: none;
  }
}

.contaner {
  color: black;
  width: 750px;
  background-color: antiquewhite;
  height: 400px;

}
</style>
